<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="reset.css">
<style>
    .nav {
        width: 100px;
        height: 60px;
        /* background-color: aquamarine; */
        display: flex;
        justify-content: space-between;
    }

    p {
        cursor: pointer;
        margin: auto;
        color: black;
    }

    ul {
        margin-left: 10px;
    }

    ul li {
        margin-bottom: 5px;
    }

    li:hover {
        color: orange;
    }
</style>



<body>
    <div class="nav">
        <p class="p1">视频</p>
        <p class="p2">直播</p>
    </div>
    <div class="content">
        <!-- 渲染内容 -->
        <!-- <ul>
            <li>恋情曝光？李小璐带小鲜肉路旁摆拍...</li>
            <li>赵本山徒弟的片酬,小沈阳片酬一年...</li>
            <li>恋情曝光？李小璐带小鲜肉路旁摆拍...</li>
            <li>赵本山徒弟的片酬,小沈阳片酬一年...</li>
            <li>恋情曝光？李小璐带小鲜肉路旁摆拍...</li>
            <li>赵本山徒弟的片酬,小沈阳片酬一年...</li>
            <li>恋情曝光？李小璐带小鲜肉路旁摆拍...</li>
            <li>赵本山徒弟的片酬,小沈阳片酬一年...</li>
        </ul> -->
    </div>

</body>

</html>
<script>
    const p1Ele = document.querySelector('.nav .p1')
    // p1Ele.style.color='green'
    // p1Ele.onclick = () => {
    //     p1Ele.style.color='green'
    // }
    //定义路由表
    var routes = [
        { path: '/video', component: video_page },
        { path: '/live', component: live_page }
    ]
    //给多个标签绑定事件
    var pArr = [...document.querySelectorAll('p')]
    pArr.forEach((item, index) => {
        item.onclick = function (e) {
            for (var i = 0; i < pArr.length; i++) {
                pArr[i].style.color='black'
            }
            item.style.color = 'green'
            e.preventDefault()
            history.pushState({}, '', routes[index].path)
            routes[index].component();
        }
    })

    //渲染视频内容
    function video_page() {
        var str1 = `
        <ul>
            <li>恋情曝光？李小璐带小鲜肉路旁摆拍...</li>
            <li>赵本山徒弟的片酬,小沈阳片酬一年...</li>
            <li>恋情曝光？李小璐带小鲜肉路旁摆拍...</li>
            <li>赵本山徒弟的片酬,小沈阳片酬一年...</li>
            <li>恋情曝光？李小璐带小鲜肉路旁摆拍...</li>
            <li>赵本山徒弟的片酬,小沈阳片酬一年...</li>
            <li>恋情曝光？李小璐带小鲜肉路旁摆拍...</li>
            <li>赵本山徒弟的片酬,小沈阳片酬一年...</li>
        </ul>
        `

        document.querySelector('.content').innerHTML = str1
    }

    //渲染直播内容
    function live_page() {
        var str2 = `
        <ul>
            <li>慢直播|双十一全球快递"云监工"...</li>
            <li>慢直播|双十一全球快递"云监工"..</li>
            <li>慢直播|双十一全球快递"云监工"...</li>
            <li>慢直播|双十一全球快递"云监工"..</li>
            <li>慢直播|双十一全球快递"云监工"...</li>
            <li>慢直播|双十一全球快递"云监工"..</li>
            <li>慢直播|双十一全球快递"云监工"...</li>
            <li>慢直播|双十一全球快递"云监工"..</li>
        </ul>
        `
        document.querySelector('.content').innerHTML = str2
    }

</script>